<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>告警日志列表</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">

    <div class="myHeader">
      <div class="myHeader-title">
        告警日志列表
      </div>
    </div>

    <el-row :gutter="10">
      <el-form label-width="80px">
        <el-col :span="6">
          <el-form-item label="ID:">
            <el-input
              clearable
              size="mini"
              show-word-limit
              maxlength="11"
              v-model="form.id"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label-width="0px">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="searchPage"></el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="告警类型:">
            <el-select v-model="form.alarmType" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="[key,val] in alarmTypeMap" :key="key" :label="val" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="查看状态:">
            <el-select v-model="form.viewStatus" @change="searchPage" placeholder="请选择" size="mini" clearable>
              <el-option v-for="[key,val] in viewStatusMap" :key="key" :label="val" :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-form>
    </el-row>

    <!--内容-->
    <my-table
      :data="page.records"
      :columns="columns"
      @handle-selection-change="selection"
    >

      <template #level="scope">
        <span>
          <img
            :src="imgUrl(scope.row.level)"
            align="absmiddle"
          >
          {{levelList[scope.row.level]}}
        </span>
      </template>

      <template #operating="row">
			<span>
			  <el-button
          size="mini"
          type="primary"
          @click.stop.prevent="forwardUpdate(row.row)"
          v-show="row.row.viewStatus == 1"
        >查看</el-button>
        <el-button
          size="mini"
          type="primary"
          @click.stop.prevent="forwardUpdateViewStatus(row.row)"
          v-show="row.row.viewStatus == 3"
        >标记已查看</el-button>
			</span>
      </template>
    </my-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="changeSize"
        @current-change="goto"
        :current-page="page.current"
        :page-sizes="[10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/tlog/model/TlogAlarm.js"></script>
  <script src="/static/js/module/tlog/api/tlogAlarmApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseOperCompanyApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseLinkInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseFrameInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseIpAddressInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseCustomerApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHousesHoldInfoApi.js"></script>
  <script src="/static/js/module/tlog/admin_alarm_log.js"></script>
</div>
</body>
</html>
